<template>
    <div class="w-[100vw] h-[100vh] overflow-x-hidden">
        <div class="flex justify-center items-center py-[70px]">
            <el-card shadow="hover" class="w-[1000px]">
                <!-- 顶部标题区域 -->
                <template #header>
                    <div class="text-center font-bold text-[19px]">周期性支付系统 v1.0</div>
                </template>

                <!-- 统计区域 -->
                <div class="flex justify-around items-center mb-[10px]">
                    <div class="flex items-center w-[130px] h-[60px] border">
                        <div class="bg-[#409EFF] w-[50px] h-[100%] flex justify-center items-center">
                            <el-icon color="#fff" size="23"><ZoomIn /></el-icon>
                        </div>
                        <div class="flex flex-col items-center justify-center text-[13px] w-[80px]">
                            <div class="text-[20px]">{{ appStore.dapp.stats.data1 }}</div>
                            <div>订单列表</div>
                        </div>
                    </div>
                    <div class="flex items-center w-[130px] h-[60px] border">
                        <div class="bg-[#909399] w-[50px] h-[100%] flex justify-center items-center">
                            <el-icon color="#fff" size="23"><Timer /></el-icon>
                        </div>
                        <div class="flex flex-col items-center justify-center text-[13px] w-[80px]">
                            <div class="text-[20px]">{{ appStore.dapp.stats.data2 }}</div>
                            <div>待生效</div>
                        </div>
                    </div>
                    <div class="flex items-center w-[130px] h-[60px] border">
                        <div class="bg-[#67C23A] w-[50px] h-[100%] flex justify-center items-center">
                            <el-icon color="#fff" size="23"><Histogram /></el-icon>
                        </div>
                        <div class="flex flex-col items-center justify-center text-[13px] w-[80px]">
                            <div class="text-[20px]">{{ appStore.dapp.stats.data3 }}</div>
                            <div>生效中</div>
                        </div>
                    </div>
                    <div class="flex items-center w-[130px] h-[60px] border">
                        <div class="bg-[#F56C6C] w-[50px] h-[100%] flex justify-center items-center">
                            <el-icon color="#fff" size="23"><RemoveFilled /></el-icon>
                        </div>
                        <div class="flex flex-col items-center justify-center text-[13px] w-[80px]">
                            <div class="text-[20px]">{{ appStore.dapp.stats.data4 }}</div>
                            <div>已结束</div>
                        </div>
                    </div>
                    <div class="flex items-center w-[130px] h-[60px] border">
                        <div class="bg-[#E6A23C] w-[50px] h-[100%] flex justify-center items-center">
                            <el-icon color="#fff" size="23"><Avatar /></el-icon>
                        </div>
                        <div class="flex flex-col items-center justify-center text-[13px] w-[80px]">
                            <div class="text-[20px]">{{ appStore.dapp.stats.data5 }}</div>
                            <div>我支付的</div>
                        </div>
                    </div>
                </div>

                <!-- 中部数据区域 -->
                <el-tabs v-model="appStore.tabsActive" @tab-click="tabChange">
                    <!-- 订单列表 -->
                    <el-tab-pane label="订单列表" name="tabs1">
                        <el-table
                            :data="appStore.dapp.toList"
                            stripe
                            show-overflow-tooltip
                            empty-text="暂无数据"
                            height="420"
                        >
                            <el-table-column prop="id" label="编号" align="center" width="80" sortable />
                            <el-table-column prop="effectiveDate" label="生效日期" align="center" width="170" />
                            <el-table-column prop="from" label="支付人" align="center" />
                            <el-table-column prop="to" label="接收人" align="center" />
                            <el-table-column prop="allCountName" label="支付次数" align="center" />
                            <el-table-column prop="frequencyName" label="支付频率" align="center" />
                            <el-table-column prop="currentAmount" label="可领代币" align="center" />
                            <el-table-column prop="status" label="订单状态" align="center">
                                <template #default="scope">
                                    <div v-if="scope.row.status == 0">待生效</div>
                                    <div v-if="scope.row.status == 1" class="text-[green]">生效中</div>
                                    <div v-if="scope.row.status == 2" class="text-[red]">已结束</div>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" align="center" width="110">
                                <template #default="scope">
                                    <el-dropdown>
                                        <el-button type="primary">
                                            操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
                                        </el-button>
                                        <template #dropdown>
                                            <el-dropdown-menu>
                                                <el-dropdown-item
                                                    v-if="scope.row.status == 1 && scope.row.currentAmount > 0"
                                                    @click="appStore.releasePayment(scope.row.id)"
                                                    >申领</el-dropdown-item
                                                >
                                                <el-dropdown-item
                                                    v-if="scope.row.status == 0 || scope.row.status == 1"
                                                    @click="transferPayment(scope.row)"
                                                    >转让</el-dropdown-item
                                                >
                                                <el-dropdown-item @click="detail(scope.row)">详情</el-dropdown-item>
                                            </el-dropdown-menu>
                                        </template>
                                    </el-dropdown>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>

                    <!-- 我支付的 -->
                    <el-tab-pane label="我支付的" name="tabs2">
                        <el-table
                            :data="appStore.dapp.fromList"
                            stripe
                            show-overflow-tooltip
                            empty-text="暂无数据"
                            height="420"
                        >
                            <el-table-column prop="id" label="编号" align="center" width="80" sortable />
                            <el-table-column prop="effectiveDate" label="生效日期" align="center" width="170" />
                            <el-table-column prop="from" label="支付人" align="center" />
                            <el-table-column prop="to" label="接收人" align="center" />
                            <el-table-column prop="allCountName" label="支付次数" align="center" />
                            <el-table-column prop="frequencyName" label="支付频率" align="center" />
                            <el-table-column prop="currentAmount" label="可领代币" align="center" />
                            <el-table-column prop="status" label="订单状态" align="center">
                                <template #default="scope">
                                    <div v-if="scope.row.status == 0">
                                        {{ appStore.statusArr[scope.row.status] }}
                                    </div>
                                    <div v-if="scope.row.status == 1" class="text-[green]">
                                        {{ appStore.statusArr[scope.row.status] }}
                                    </div>
                                    <div v-if="scope.row.status == 2" class="text-[red]">
                                        {{ appStore.statusArr[scope.row.status] }}
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" align="center" width="110">
                                <template #default="scope">
                                    <!-- 详情按钮 -->
                                    <el-button size="small" type="primary" @click="detail(scope.row)">详情</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>

                    <!-- 发起支付 -->
                    <el-tab-pane label="发起支付" name="tabs3">
                        <el-form :model="appStore.dapp.formData" label-width="auto" class="w-[500px] mt-[10px]">
                            <el-form-item label="代币合约">
                                <el-input v-model="appStore.dapp.formData.token" />
                            </el-form-item>
                            <el-form-item label="接收人钱包">
                                <el-input v-model="appStore.dapp.formData.to" />
                            </el-form-item>
                            <el-form-item label="生效时间">
                                <el-date-picker
                                    v-model="appStore.dapp.formData.effectiveDate"
                                    type="datetime"
                                    placeholder="请选择时间"
                                />
                            </el-form-item>
                            <el-form-item label="支付数量">
                                <el-input v-model="appStore.dapp.formData.amount" type="number" />
                            </el-form-item>
                            <el-form-item label="支付次数">
                                <div class="flex justify-start items-center">
                                    <div>
                                        <el-input-number
                                            v-model="appStore.dapp.formData.allCount"
                                            :min="1"
                                            :precision="0"
                                            :value-on-clear="1"
                                        />
                                    </div>
                                    <div class="ml-[5px]">
                                        次，每次<span class="px-[3px] text-[red] font-bold">{{ averageAmount }}</span
                                        >个
                                    </div>
                                </div>
                            </el-form-item>
                            <el-form-item label="支付频率">
                                <div class="flex justify-start items-center">
                                    <div>
                                        <el-input-number
                                            v-model="appStore.dapp.formData.frequency"
                                            :min="1"
                                            :precision="0"
                                            :value-on-clear="1"
                                        />
                                    </div>
                                    <div class="ml-[5px] w-[80px]">
                                        <el-select v-model="appStore.dapp.formData.unit" placeholder="请选择">
                                            <el-option :key="0" label="秒" :value="0" />
                                            <el-option :key="1" label="天" :value="1" />
                                            <el-option :key="2" label="周" :value="2" />
                                            <el-option :key="3" label="月" :value="3" />
                                        </el-select>
                                    </div>
                                    <div class="ml-[5px]">/次</div>
                                </div>
                            </el-form-item>
                        </el-form>
                        <div class="flex justify-center items-center">
                            <el-button type="primary" @click="appStore.createPayment">提交</el-button>
                            <el-button>重置</el-button>
                        </div>
                    </el-tab-pane>

                    <!-- token转账 -->
                    <el-tab-pane label="代币转账" name="tabs4">
                        <el-form
                            :model="appStore.dapp.formDataToken"
                            label-width="auto"
                            class="max-w-[500px] mt-[10px]"
                        >
                            <el-form-item label="转账数量">
                                <el-input v-model="appStore.dapp.formDataToken.amount" type="number" />
                            </el-form-item>
                            <el-form-item label="收款人钱包">
                                <el-input v-model="appStore.dapp.formDataToken.to" />
                            </el-form-item>
                        </el-form>
                        <div class="flex justify-center items-center">
                            <el-button type="primary" @click="appStore.tokenTransfer">转账</el-button>
                            <el-button>重置</el-button>
                        </div>
                    </el-tab-pane>

                    <!-- 其他 -->
                    <el-tab-pane label="其他数据" name="tabs5">
                        <el-form
                            :model="appStore.dapp.formDataToken"
                            label-width="auto"
                            class="max-w-[500px] mt-[10px]"
                        >
                            <el-form-item label="钱包代币余额">
                                <div>{{ appStore.dapp.tokenBalance }}</div>
                            </el-form-item>
                            <el-form-item label="钱包TBNB余额">
                                <div>{{ appStore.dapp.balance }}</div>
                            </el-form-item>
                            <el-form-item label="合约代币余额">
                                <div>{{ appStore.dapp.contractTokenBalance }}</div>
                            </el-form-item>
                            <el-form-item label="代币合约">
                                <div>{{ appStore.dapp.token?._address || "-" }}</div>
                            </el-form-item>
                            <el-form-item label="支付合约">
                                <div>{{ appStore.dapp.payment?._address || "-" }}</div>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>

                <!-- 底部信息区域 -->
                <template #footer>
                    <div v-if="appStore.isConnect" class="text-[14px] text-[#a7a7a7]">
                        测试钱包：{{ appStore.address || "-" }}
                    </div>
                    <div v-else class="text-[14px] text-[#a7a7a7]">
                        当前钱包：<el-button class="ml-[5px]" type="danger" @click="appStore.dappInit"
                            >连接钱包</el-button
                        >
                    </div>
                    <div class="text-[14px] text-[#a7a7a7] mt-[10px]">
                        <el-tooltip
                            effect="dark"
                            content="复制这组助记词导入到您的钱包，该钱包有足够的代币和TBNB，同时也是合约所有者"
                            placement="top-start"
                        >
                            测试助记词：hockey veteran apart trigger mutual deer poet inside stuff inhale machine
                            satoshi
                        </el-tooltip>
                    </div>
                </template>
            </el-card>

            <!-- 对话框 -->
            <el-dialog v-model="dialogFormVisible" title="接受人转让" width="500">
                <el-form :model="dialogForm" class="mt-[20px]">
                    <el-form-item label="新接受人钱包">
                        <el-input v-model="dialogForm.newTo" autocomplete="off" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="closeDialog">取消</el-button>
                        <el-button type="primary" @click="confirmDialog">提交</el-button>
                    </div>
                </template>
            </el-dialog>

            <!-- 订单详情框 -->
            <el-dialog v-model="dialogDetailVisible" title="订单详情" width="580">
                <el-form :model="info" label-width="auto" class="w-[550px] mt-[10px]">
                    <el-form-item label="订单进度">
                        <el-progress
                            class="w-[100%]"
                            :percentage="(((info.amount - info.remainingAmount) / info.amount) * 100).toFixed(2)"
                        />
                    </el-form-item>
                    <el-form-item label="代币合约">
                        <el-input v-model="info.token" disabled />
                    </el-form-item>
                    <el-form-item label="支付人">
                        <el-input v-model="info.from" disabled />
                    </el-form-item>
                    <el-form-item label="接收人">
                        <el-input v-model="info.to" disabled />
                    </el-form-item>
                    <el-form-item label="生效时间">
                        <el-input v-model="info.effectiveDate" disabled />
                    </el-form-item>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="编号">
                                <el-input v-model="info.id" disabled />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="支付数量">
                                <el-input v-model="info.amount" type="number" disabled />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="支付频率">
                                <el-input v-model="info.frequencyName" disabled />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="支付次数">
                                <el-input v-model="info.allCountName" disabled />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="已申领次数">
                                <el-input v-model="info.claimNumber" disabled />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="单次金额">
                                <el-input v-model="info.averageAmount" disabled />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="待申领金额">
                                <el-input v-model="info.currentAmount" disabled />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="剩余金额">
                                <el-input v-model="info.remainingAmount" disabled />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="下次申领日期">
                                <el-input v-model="info.nextClaimTimes" disabled />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="订单状态">
                                <el-input v-model="appStore.statusArr[info.status]" disabled />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, watchEffect, ref, reactive, computed } from "vue"
import useAppStore from "@/stores/modules/app"

const appStore = useAppStore()

// 计算平均每次多少个
const averageAmount = computed(() => {
    if (parseInt(appStore.dapp.formData.allCount)) {
        return (appStore.dapp.formData.amount / appStore.dapp.formData.allCount).toFixed(2)
    }
    return 0
})

// 当前操作行数据
const info = ref({})
// 修改接收人对话框状态
const dialogFormVisible = ref(false)
// 订单详情对话框状态
const dialogDetailVisible = ref(false)
// 修改接收人对话框表单
const dialogForm = reactive({
    newTo: ""
})

// 转让按钮
const transferPayment = (row) => {
    // 把行数据赋值给info
    info.value = row
    // 显示对话框
    dialogFormVisible.value = true
}
// 对话框-取消
const closeDialog = () => {
    // 隐藏对话框
    dialogFormVisible.value = false
    // 重置表单
    dialogForm.newTo = ""
}
// 对话框-确认
const confirmDialog = async () => {
    // 更改接受者
    await appStore.transferPayment({
        id: info.value.id,
        newTo: dialogForm.newTo
    })
    // 隐藏对话框
    closeDialog()
}

// 详情按钮
const detail = (row) => {
    // 把行数据赋值给info
    info.value = row
    // 显示对话框
    dialogDetailVisible.value = true
}

// 监听tabs切换
watchEffect(() => {
    if (appStore.tabsActive == "tabs1" && appStore.isConnect) {
        appStore.getToPayments()
    }
    if (appStore.tabsActive == "tabs2" && appStore.isConnect) {
        appStore.getFromPayments()
    }
    // 刷新余额
    appStore.getBalanceFunc()
})

// 生命周期钩子
onMounted(async () => {
    // 延迟600毫秒，等待metamask加载完毕，电脑很卡的适当延长
    setTimeout(async () => {
        // 初始化dapp
        await appStore.dappInit()
    }, 600)
})

onBeforeUnmount(async () => {
    // 取消事件监听
    // 暂时暂停
    // await appStore.cancelEvents()
})
</script>
